{% extends 'base.html' %}
{% load static %}

{% block title %}Task & Appointment Manager - Boost Your Productivity{% endblock %}

{% block extra_css %}
<style>
    :root {
        --primary: #4f46e5;
        --primary-light: #818cf8;
        --secondary: #7c3aed;
        --dark: #1e1b4b;
        --light: #f8fafc;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
    }
    
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #1f2937;
        line-height: 1.6;
    }
    
    .welcome-card {
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        border: none;
        border-radius: 16px;
        color: white;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 30px rgba(79, 70, 229, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .welcome-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(79, 70, 229, 0.3);
    }
    .welcome-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 60%);
        transform: rotate(30deg);
    }
    .stat-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none;
        border-radius: 12px;
        overflow: hidden;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .stat-icon {
        font-size: 2.5rem;
        opacity: 0.8;
    }
    .task-card, .appointment-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .task-card:hover, .appointment-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .progress {
        height: 8px;
        border-radius: 4px;
        background-color: #e9ecef;
    }
    
    .progress-thin {
        height: 6px;
    }
    
    .progress-bar {
        border-radius: 4px;
        transition: width 0.6s ease;
    }
    
    .legend-color {
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 2px;
    }
</style>
{% endblock %}

{% block content %}
{% if not user.is_authenticated %}
<!-- Hero Section for Non-Authenticated Users -->
<section class="py-7 py-lg-8 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 mb-3 rounded-pill fw-medium">🚀 Boost Your Productivity</span>
                <h1 class="display-4 fw-bold mb-4">Organize Your Work & <span class="text-primary">Get More Done</span></h1>
                <p class="lead text-muted mb-5">The all-in-one platform to manage your tasks, schedule appointments, and collaborate with your team. Stay organized and never miss a deadline again.</p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{% url 'login' %}" class="btn btn-primary btn-lg px-4 py-3 fw-medium">Login to Get Started</a>
                    <a href="#features" class="btn btn-outline-primary btn-lg px-4 py-3 fw-medium">Learn More</a>
                </div>
                <div class="mt-4 d-flex align-items-center text-muted">
                    <div class="d-flex me-3">
                        <div class="avatar-placeholder" style="background-color: #4f46e5; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; border: 2px solid white; margin-right: -8px;">JD</div>
                        <div class="avatar-placeholder" style="background-color: #7c3aed; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; border: 2px solid white; margin-right: -8px;">JS</div>
                        <div class="avatar-placeholder" style="background-color: #8b5cf6; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; border: 2px solid white;">AJ</div>
                    </div>
                    <span>Trusted by 10,000+ professionals</span>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="position-relative">
                    <!-- Animated background elements -->
                    <div class="position-absolute top-0 start-0 w-100 h-100 bg-primary bg-opacity-5 rounded-4" style="transform: rotate(-5deg); z-index: -1; animation: float 6s ease-in-out infinite;"></div>
                    <div class="position-absolute top-50 start-50 translate-middle w-75 h-75 bg-primary bg-opacity-3 rounded-circle" style="z-index: -1; animation: pulse 8s ease-in-out infinite;"></div>
                    
                    <!-- Main image with hover effect -->
                    <div class="position-relative overflow-hidden rounded-4 shadow-lg" style="transform: perspective(1000px) rotateY(-5deg) rotateX(2deg); transition: all 0.5s ease;">
                        <img src="{% static 'images/hero.jpg' %}" class="img-fluid w-100 h-auto" alt="Dashboard Preview" style="transition: transform 0.5s ease;">
                        <!-- Overlay with gradient -->
                        <div class="position-absolute top-0 start-0 w-100 h-100 bg-gradient-to-bottom from-transparent to-dark opacity-10"></div>
                        
                        <!-- Floating elements -->
                        <div class="position-absolute top-20 start-20 bg-white p-2 rounded-circle shadow-sm" style="width: 40px; height: 40px; animation: float 4s ease-in-out infinite 0.5s;">
                            <i class="fas fa-tasks text-primary"></i>
                        </div>
                        <div class="position-absolute top-30 end-20 bg-white p-2 rounded-circle shadow-sm" style="width: 40px; height: 40px; animation: float 5s ease-in-out infinite 1s;">
                            <i class="fas fa-calendar-check text-success"></i>
                        </div>
                        <div class="position-absolute bottom-20 start-30 bg-white p-2 rounded-circle shadow-sm" style="width: 40px; height: 40px; animation: float 6s ease-in-out infinite 1.5s;">
                            <i class="fas fa-chart-line text-info"></i>
                        </div>
                    </div>
                    
                    <!-- Decorative elements -->
                    <div class="position-absolute bottom-0 end-0 translate-middle-y">
                        <div class="d-flex align-items-center bg-white p-2 px-3 rounded-pill shadow-sm">
                            <div class="spinner-grow spinner-grow-sm text-primary me-2" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <span class="small fw-medium">Real-time Updates</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Add this in your style section or CSS file -->
            <style>
                @keyframes float {
                    0%, 100% { transform: translateY(0); }
                    50% { transform: translateY(-10px); }
                }
                @keyframes pulse {
                    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
                    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.3; }
                }
                .hero-img-container:hover {
                    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) !important;
                }
                .hero-img-container:hover img {
                    transform: scale(1.03);
                }
            </style>
        </div>
    </div>
</section>

<!-- Features Section -->
<section id="features" class="py-7 py-lg-8">
    <div class="container">
        <div class="text-center mb-7">
            <span class="text-uppercase text-primary fw-bold small">Features</span>
            <h2 class="display-5 fw-bold mb-3">Everything You Need to <span class="text-primary">Succeed</span></h2>
            <p class="lead text-muted w-lg-50 mx-auto">Powerful features designed to help you stay organized and productive</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm-hover p-4 transition-all" style="border-radius: 15px;">
                    <div class="bg-primary bg-opacity-10 text-primary rounded-3 mb-4 p-3 d-inline-flex" style="width: 60px; height: 60px;">
                        <i class="fas fa-tasks fa-2x m-auto"></i>
                    </div>
                    <h3 class="h4 mb-3">Task Management</h3>
                    <p class="text-muted mb-4">Easily create, assign, and track tasks with status updates, priority levels, and due dates.</p>
                    <ul class="list-unstyled text-muted mb-0">
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Task assignments</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Priority levels</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Progress tracking</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm-hover p-4 transition-all" style="border-radius: 15px;">
                    <div class="bg-success bg-opacity-10 text-success rounded-3 mb-4 p-3 d-inline-flex" style="width: 60px; height: 60px;">
                        <i class="far fa-calendar-alt fa-2x m-auto"></i>
                    </div>
                    <h3 class="h4 mb-3">Appointment Scheduling</h3>
                    <p class="text-muted mb-4">Schedule and manage appointments with clients or team members seamlessly.</p>
                    <ul class="list-unstyled text-muted mb-0">
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Calendar integration</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Email notifications</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Team availability</li>
                    </ul>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card h-100 border-0 shadow-sm-hover p-4 transition-all" style="border-radius: 15px;">
                    <div class="bg-info bg-opacity-10 text-info rounded-3 mb-4 p-3 d-inline-flex" style="width: 60px; height: 60px;">
                        <i class="fas fa-chart-line fa-2x m-auto"></i>
                    </div>
                    <h3 class="h4 mb-3">Analytics & Reports</h3>
                    <p class="text-muted mb-4">Get insights into your productivity with detailed analytics and reports.</p>
                    <ul class="list-unstyled text-muted mb-0">
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Performance metrics</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Custom reports</li>
                        <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> Team productivity</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-7 py-lg-8 bg-light">
    <div class="container text-center">
        <h2 class="display-5 fw-bold mb-4">Ready to boost your productivity?</h2>
        <p class="lead text-muted mb-5">Join thousands of professionals who trust our platform to stay organized and get more done.</p>
        <a href="{% url 'login' %}" class="btn btn-primary btn-lg px-5 py-3 fw-medium">
            Login to Get Started
        </a>
        <p class="small text-muted mt-3 mb-0">Contact your administrator for access</p>
    </div>
</section>

{% endif %}

{% if user.is_authenticated %}
<!-- Welcome Card with Stats for Authenticated Users -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card welcome-card p-4 p-lg-5">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-white bg-opacity-20 p-3 rounded-circle me-3">
                            <i class="fas fa-calendar-check fa-lg text-white"></i>
                        </div>
                        <div>
                            <p class="mb-0 text-white-80">Welcome to your dashboard</p>
                            <h1 class="display-5 fw-bold text-white mb-0">Hello, {{ user.first_name|default:user.username }}! <span class="wave-hand">👋</span></h1>
                        </div>
                    </div>
                    <p class="lead text-white-80 mb-4">Here's what's happening with your tasks and appointments today.</p>
                    <div class="d-flex flex-wrap gap-3">
                        <a href="{% url 'tasks:task-create' %}" class="btn btn-light btn-lg px-4">
                            <i class="fas fa-plus me-2"></i>New Task
                        </a>
                        <a href="{% url 'appointments:appointment-create' %}" class="btn btn-outline-light btn-lg px-4">
                            <i class="far fa-calendar-plus me-2"></i>Schedule
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 mt-4 mt-lg-0">
                    <div class="d-flex bg-white bg-opacity-10 p-4 rounded-3">
                        <div class="text-center px-3">
                            <h2 class="display-5 fw-bold text-white mb-0">{{ tasks.count|default:0 }}</h2>
                            <small class="text-white-70">Total Tasks</small>
                        </div>
                        <div class="vr mx-3 opacity-25"></div>
                        <div class="text-center px-3">
                            <h2 class="display-5 fw-bold text-white mb-0">{{ upcoming_appointments.count|default:0 }}</h2>
                            <small class="text-white-70">Upcoming</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Stats -->
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="card stat-card h-100 border-0 shadow-sm-hover">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 me-4">
                        <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                            <i class="fas fa-tasks"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <span class="text-uppercase small text-muted fw-bold">Due Today</span>
                        <h3 class="mb-0 mt-1">{{ tasks_due_today|default:'0' }}</h3>
                        <div class="mt-2">
                            <span class="badge bg-primary bg-opacity-10 text-primary">{{ tasks_due_today|default:'0' }} tasks</span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="progress progress-thin">
                        <div class="progress-bar bg-primary" 
                            role="progressbar" 
                            style="width: {{ due_today_percentage|default:0 }}%" 
                            aria-valuenow="{{ due_today_percentage|default:0 }}" 
                            aria-valuemin="0" 
                            aria-valuemax="100">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-1">
                        <small class="text-muted">Progress</small>
                        <small class="text-muted">{{ due_today_percentage|default:0 }}%</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card stat-card h-100 border-0 shadow-sm-hover">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 me-4">
                        <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                            <i class="far fa-calendar-alt"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <span class="text-uppercase small text-muted fw-bold">Upcoming</span>
                        <h3 class="mb-0 mt-1">{{ upcoming_appointments.count|default:'0' }}</h3>
                        <div class="mt-2">
                            <span class="badge bg-warning bg-opacity-10 text-warning">{{ upcoming_appointments.count|default:'0' }} scheduled</span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <i class="fas fa-clock text-warning me-2"></i>
                        </div>
                        <div class="flex-grow-1 ms-2">
                            <small class="text-muted">
                                {% if next_appointment %}
                                    Next: {{ next_appointment.start_time|date:"M d, g:i A" }}
                                {% else %}
                                    No upcoming appointments
                                {% endif %}
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card stat-card h-100 border-0 shadow-sm-hover">
            <div class="card-body p-4">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0 me-4">
                        <div class="stat-icon bg-success bg-opacity-10 text-success">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        <span class="text-uppercase small text-muted fw-bold">Completed</span>
                        <h3 class="mb-0 mt-1">{{ completed_tasks|default:'0' }}</h3>
                        <div class="mt-2">
                            <span class="badge bg-success bg-opacity-10 text-success">{{ completion_rate|default:'0' }}% completion</span>
                        </div>
                    </div>
                </div>
                <div class="mt-3">
                    <div class="progress progress-thin">
                        <div class="progress-bar bg-success" 
                            role="progressbar" 
                            style="width: {{ completion_rate|default:0 }}%" 
                            aria-valuenow="{{ completion_rate|default:0 }}" 
                            aria-valuemin="0" 
                            aria-valuemax="100">
                        </div>
                    </div>
                    <div class="d-flex justify-content-between mt-1">
                        <small class="text-muted">This week</small>
                        <small class="text-muted">+{{ weekly_increase|default:'0' }}%</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Tasks Summary -->
    <div class="col-lg-6">
        <div class="card h-100 border-0 shadow-sm-hover">
            <div class="card-header bg-white d-flex justify-content-between align-items-center border-0 pt-4 px-4">
                <div class="d-flex align-items-center">
                    <div class="bg-primary bg-opacity-10 p-2 rounded me-3">
                        <i class="fas fa-tasks text-primary"></i>
                    </div>
                    <h5 class="mb-0 fw-bold">My Tasks</h5>
                </div>
                <a href="{% url 'tasks:task-list' %}" class="btn btn-sm btn-outline-primary rounded-pill px-3">
                    View All <i class="fas fa-arrow-right ms-1"></i>
                </a>
            </div>
            <div class="card-body px-4 pt-0">
                {% if tasks %}
                    <div class="list-group list-group-flush">
                        {% for task in tasks|slice:":5" %}
                        <a href="{% url 'tasks:task-detail' task.id %}" class="list-group-item list-group-item-action border-0 px-0 py-3">
                            <div class="d-flex align-items-center">
                                <div class="form-check form-check-primary me-3">
                                    <input type="checkbox" 
                                           class="form-check-input task-checkbox" 
                                           id="task-{{ task.id }}" 
                                           data-task-id="{{ task.id }}"
                                           {% if task.status == 'done' %}checked{% endif %}>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h6 class="mb-1 {% if task.status == 'done' %}text-decoration-line-through text-muted{% else %}text-dark{% endif %}">
                                            {{ task.title }}
                                        </h6>
                                        <span class="badge rounded-pill bg-{{ task.get_priority_display|lower }}-subtle text-{{ task.get_priority_display|lower }} ms-2">
                                            {{ task.get_priority_display }}
                                        </span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center">
                                            <i class="far fa-calendar-alt text-muted me-1" style="font-size: 0.8rem;"></i>
                                            <small class="text-muted">
                                                {{ task.due_date|date:"M d, Y"|default:"No due date" }}
                                            </small>
                                        </div>
                                        <span class="badge bg-{{ task.get_status_display|lower }}-subtle text-{{ task.get_status_display|lower }} text-capitalize">
                                            {{ task.get_status_display }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                    <div class="text-center mt-3">
                        <a href="{% url 'tasks:task-create' %}" class="btn btn-sm btn-outline-primary rounded-pill px-4">
                            <i class="fas fa-plus me-1"></i> Add New Task
                        </a>
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <div class="mb-4">
                            <i class="fas fa-tasks fa-3x text-light mb-3" style="background: #e0e7ff; padding: 1.5rem; border-radius: 50%;"></i>
                        </div>
                        <h5 class="mb-2">No tasks yet</h5>
                        <p class="text-muted mb-4">Get started by creating your first task</p>
                        <a href="{% url 'tasks:task-create' %}" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> Create Task
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Appointments Summary -->
    <div class="col-lg-6">
        <div class="card h-100 border-0 shadow-sm-hover">
            <div class="card-header bg-white d-flex justify-content-between align-items-center border-0 pt-4 px-4">
                <div class="d-flex align-items-center">
                    <div class="bg-info bg-opacity-10 p-2 rounded me-3">
                        <i class="far fa-calendar-alt text-info"></i>
                    </div>
                    <h5 class="mb-0 fw-bold">Upcoming Appointments</h5>
                </div>
                <a href="{% url 'appointments:appointment-list' %}" class="btn btn-sm btn-outline-primary rounded-pill px-3">
                    View All <i class="fas fa-arrow-right ms-1"></i>
                </a>
            </div>
            <div class="card-body px-4 pt-0">
                {% if upcoming_appointments %}
                    <div class="list-group list-group-flush">
                        {% for appointment in upcoming_appointments|slice:":5" %}
                        <a href="{% url 'appointments:appointment-detail' appointment.id %}" class="list-group-item list-group-item-action border-0 px-0 py-3">
                            <div class="d-flex align-items-start">
                                <div class="me-3 text-center">
                                    <div class="bg-light rounded-3 p-2 text-center" style="min-width: 70px;">
                                        <div class="text-uppercase text-muted fw-bold" style="font-size: 0.65rem; line-height: 1;">
                                            {{ appointment.start_time|date:"M" }}
                                        </div>
                                        <div class="h4 fw-bold text-primary my-1" style="line-height: 1;">
                                            {{ appointment.start_time|date:"d" }}
                                        </div>
                                        <div class="text-muted small" style="font-size: 0.65rem; line-height: 1;">
                                            {{ appointment.start_time|date:"D" }}
                                        </div>
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <h6 class="mb-1">{{ appointment.service.name|truncatechars:30 }}</h6>
                                        <span class="badge bg-{{ appointment.status }}-subtle text-{{ appointment.status }} text-capitalize">
                                            {{ appointment.get_status_display }}
                                        </span>
                                    </div>
                                    <div class="d-flex align-items-center text-muted mb-1">
                                        <i class="far fa-clock me-2" style="font-size: 0.8rem;"></i>
                                        <small>{{ appointment.start_time|date:"g:i A" }} - {{ appointment.end_time|date:"g:i A" }}</small>
                                    </div>
                                    {% if appointment.staff_member %}
                                    <div class="d-flex align-items-center text-muted">
                                        <i class="fas fa-user-tie me-2" style="font-size: 0.8rem;"></i>
                                        <small>{{ appointment.staff_member.user.get_full_name|default:appointment.staff_member.user.username }}</small>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                    <div class="text-center mt-3">
                        <a href="{% url 'appointments:appointment-create' %}" class="btn btn-sm btn-outline-primary rounded-pill px-4">
                            <i class="far fa-calendar-plus me-1"></i> Schedule New
                        </a>
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <div class="mb-4">
                            <i class="far fa-calendar-alt fa-3x text-light mb-3" style="background: #dbeafe; padding: 1.5rem; border-radius: 50%;"></i>
                        </div>
                        <h5 class="mb-2">No upcoming appointments</h5>
                        <p class="text-muted mb-4">Schedule your first appointment to get started</p>
                        <a href="{% url 'appointments:appointment-create' %}" class="btn btn-primary">
                            <i class="far fa-calendar-plus me-1"></i> Schedule Appointment
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm-hover">
            <div class="card-header bg-white d-flex justify-content-between align-items-center border-0 pt-4 px-4">
                <div class="d-flex align-items-center">
                    <div class="bg-primary bg-opacity-10 p-2 rounded me-3">
                        <i class="fas fa-chart-pie text-primary"></i>
                    </div>
                    <h5 class="mb-0 fw-bold">Task Status Overview</h5>
                </div>
                <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary rounded-pill px-3 dropdown-toggle" type="button" id="chartPeriodDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        This Month
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="chartPeriodDropdown">
                        <li><a class="dropdown-item active" href="#" data-period="month">This Month</a></li>
                        <li><a class="dropdown-item" href="#" data-period="week">This Week</a></li>
                        <li><a class="dropdown-item" href="#" data-period="year">This Year</a></li>
                    </ul>
                </div>
            </div>
            <div class="card-body px-4 pt-0">
                <div class="chart-container" style="position: relative; height: 280px;">
                    <canvas id="taskStatusChart" data-counts="{{ task_status_data|join:',' }}"></canvas>
                </div>
                <div class="row mt-4 g-3" id="chartLegend">
                    <div class="col-6 col-md-3">
                        <div class="d-flex align-items-center">
                            <div class="legend-color bg-primary rounded me-2"></div>
                            <small class="text-muted">Not Started</small>
                            <span class="ms-auto fw-bold">{{ task_status_data.0|default:0 }}</span>
                        </div>
                        <div class="progress progress-thin mt-2">
                            <div class="progress-bar bg-primary" 
                                role="progressbar" 
                                style="width: {{ task_status_data.0|default:0 }}%" 
                                aria-valuenow="{{ task_status_data.0|default:0 }}" 
                                aria-valuemin="0" 
                                aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="d-flex align-items-center">
                            <div class="legend-color bg-warning rounded me-2"></div>
                            <small class="text-muted">In Progress</small>
                            <span class="ms-auto fw-bold">{{ task_status_data.1|default:0 }}</span>
                        </div>
                        <div class="progress progress-thin mt-2">
                            <div class="progress-bar bg-warning" 
                                role="progressbar" 
                                style="width: {{ task_status_data.1|default:0 }}%" 
                                aria-valuenow="{{ task_status_data.1|default:0 }}" 
                                aria-valuemin="0" 
                                aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="d-flex align-items-center">
                            <div class="legend-color bg-success rounded me-2"></div>
                            <small class="text-muted">Completed</small>
                            <span class="ms-auto fw-bold">{{ task_status_data.2|default:0 }}</span>
                        </div>
                        <div class="progress progress-thin mt-2">
                            <div class="progress-bar bg-success" 
                                role="progressbar" 
                                style="width: {{ task_status_data.2|default:0 }}%" 
                                aria-valuenow="{{ task_status_data.2|default:0 }}" 
                                aria-valuemin="0" 
                                aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3">
                        <div class="d-flex align-items-center">
                            <div class="legend-color bg-danger rounded me-2"></div>
                            <small class="text-muted">Overdue</small>
                            <span class="ms-auto fw-bold">{{ task_status_data.3|default:0 }}</span>
                        </div>
                        <div class="progress progress-thin mt-2">
                            <div class="progress-bar bg-danger" 
                                role="progressbar" 
                                style="width: {{ task_status_data.3|default:0 }}%" 
                                aria-valuenow="{{ task_status_data.3|default:0 }}" 
                                aria-valuemin="0" 
                                aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% if not user.is_authenticated %}
<!-- Hero Section for Non-Authenticated Users -->
<div class="row justify-content-center">
    <div class="col-lg-8 text-center py-5 my-5">
        <h1 class="display-4 fw-bold mb-4">Task & Appointment Manager</h1>
        <p class="lead mb-5">Streamline your workflow, manage tasks efficiently, and never miss an appointment with our comprehensive task and appointment management system.</p>
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <a href="{% url 'login' %}" class="btn btn-primary btn-lg px-4">Login to Get Started</a>
        </div>
    </div>
</div>

<!-- Features -->
<div class="row g-4 py-5">
    <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="feature-icon bg-primary bg-gradient text-white rounded-3 mb-3 p-3 d-inline-block">
                    <i class="fas fa-tasks fa-2x"></i>
                </div>
                <h3>Task Management</h3>
                <p>Easily create, assign, and track tasks with status updates and priority levels.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="feature-icon bg-success bg-gradient text-white rounded-3 mb-3 p-3 d-inline-block">
                    <i class="far fa-calendar-alt fa-2x"></i>
                </div>
                <h3>Appointment Scheduling</h3>
                <p>Schedule and manage appointments with clients or team members seamlessly.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="feature-icon bg-info bg-gradient text-white rounded-3 mb-3 p-3 d-inline-block">
                    <i class="fas fa-chart-line fa-2x"></i>
                </div>
                <h3>Analytics</h3>
                <p>Get insights into your productivity with detailed analytics and reports.</p>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
{% if user.is_authenticated %}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Initialize task status chart
    document.addEventListener('DOMContentLoaded', function() {
        const chartElement = document.getElementById('taskStatusChart');
        if (!chartElement) return;

        const ctx = chartElement.getContext('2d');
        const chartData = {
            labels: ['To Do', 'In Progress', 'In Review', 'Done'],
            datasets: [{
                data: chartElement.dataset.counts.split(',').map(Number),
                backgroundColor: [
                    'rgba(108, 117, 125, 0.8)',   // To Do
                    'rgba(13, 202, 240, 0.8)',    // In Progress
                    'rgba(111, 66, 193, 0.8)',    // In Review
                    'rgba(25, 135, 84, 0.8)'      // Done
                ],
                borderColor: [
                    'rgba(108, 117, 125, 1)',
                    'rgba(13, 202, 240, 1)',
                    'rgba(111, 66, 193, 1)',
                    'rgba(25, 135, 84, 1)'
                ],
                borderWidth: 1
            }]
        };

        const chartConfig = {
            type: 'doughnut',
            data: chartData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleFont: { size: 14 },
                        bodyFont: { size: 14 },
                        padding: 12,
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.raw || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = Math.round((value / total) * 100);
                                return ` ${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        };

        new Chart(ctx, chartConfig);
    });
</script>
{% endif %}
{% endblock %}